<script type="text/javascript" src="/js/jquery.toggleCheckbox.js"></script>
<script>
var check = false;

$('#toggleAll').click(function(){
	jQuery("input[type='checkbox'] + label").each(function(i, el) {
		$(el).cssCheckboxToggle();
	});
});

$('#selAll').click(function(){
	jQuery("input[type='checkbox'] + label").each(function(i, el) {
		$(el).cssCheckboxSel(check);
	});
	check = !check;
});

$("#activities_form").bind("submit", function() {
  $.fancybox.showActivity();
  
	$.ajax({
		type	: "POST",
		cache	: false,
		url		: "<?php echo url_for('sfGuardRegister/activities') ?>",
		data	: $(this).serializeArray(),
		success: function(data) {
			$('#activitiesList').html(data);
			$.fancybox.close();
		}
	});
	return false;
});

$("a#btnSend").click(function(){
  $("form#activities_form").submit();
});

$("#activities_form").cssCheckbox();
</script>
<style>
label {
	padding-left: 20px;
	background: url(/images/cross_16.png) no-repeat;
	cursor: pointer;
	color: #999999;
	font-size:14px
}

label.checked {
	background: url(/images/check_16.png) no-repeat;
	color: #000000;
}
label.over {
	color: #999999;
}

ul.contacts {
	list-style-type: none;
	margin-left: 0;
	padding-left: 1em;
	text-indent: 1em;
}
ul.contacts li{
	list-style-type: none;
	margin-top:5px;
	margin-bottom:5px
}
#toggleAll, #selAll{
  font-weight: bold;
  cursor: pointer;
}
</style>
<div style="width:600px; height:500px">
  <h1>Activities Selection</h1>
  <hr />
  <div style="width:auto; height:auto; position:relative; display:inline">
    <a id="toggleAll" href="#" class="small blue awesome">Toggle</a>
  </div>
  <form action="" id="activities_form" class="center" method="post">
      <input type="hidden" name="sf_guard_user_id" id="sf_guard_user_id" value="<?php echo $user_id; ?>" />
      <div style="overflow:auto; height:300px; margin-top: 10px; border: 1px solid black">
        <ul class="contacts">
		    <?php foreach($activities as $activity):?>
		    <li>
		      <input type="checkbox" class="crirHiddenJS" name="activities[]" value="<?php echo $activity->id; ?>" />
		      <label><?php echo $activity->description; ?></label>
		    </li>
		    <?php endforeach; ?>
		    </ul>
		 </div>
      <div style="width:auto; height:auto; position:relative; text-align:center; margin-top:10px; margin-bottom:10px;">
        <a id="btnSend" href="#" class="small blue awesome">Terminate</a>
      </div>
	  <!--<button type="submit" id="btnSend" value="invite">Terminate</button>-->
  </form>
<div>
